<template>
    <div class="main">
        <div class="topImg" data-aos="fade"  data-aos-duration="1000">
            <img :src="image" alt="">
            <span>用车使用指南</span>
        </div>
        <div class="page_content">
            <div class="tab">
                <div :class="{ 'tab_name': true, active: active == i }" @click="scroll(i)" v-for="i in tablist"
                    :key="i">
                    <span>{{ i }}</span>
                    <span class="line"></span>
                </div>
            </div>
            <div class="type1">
                <div v-html="info.post_content"></div>
                <!-- <div class="dataInfo">
                    <div class="notice">
                        <span class="txt">
                            尊敬的用户，感谢你使用本公司生产的电动车，为保护你的合法权益，请熟读并严格遵守以下的相关标准及注意事项。当你使用本车时，请当场检验、调试并有权要求销售人员提供正确的操作方法及维护事项，提供有效购车票证和保修卡及保修单位的地址和联系电话。
                            请不要私自对车体、线缆、电器件、发动机及其它有关该车结构性能进行改造:电缆线、电器件参数的私自修改，会造成整车性能下降或电器性能的失效及其它情况发生，缩短该车的使用寿命，性能得不到有效保障:由此产生的责任与损失，富贵泉公司概不负责，一律由用户自行承担。
                        </span>
                        <div class="code">
                            <img src="@/assets/img/code.png" alt="">
                            <span>官方公众号</span>
                        </div>
                    </div>
                </div>
                <div class="table1">
                    <p class="title">用车保养周期</p>
                    <div class="imgCon">
                        <img src="@/assets/img/demo2.png" alt="">
                    </div>
                </div>
                <div class="savetip">
                    <div class="title">
                        安全注意事项
                    </div>
                    <div class="txt">
                        1.严格遵守道路交通法规，谨慎驾驶，保持车距:禁止超速、闯红灯、逆向行驶;
                        2.驾驶电动两轮轻便摩托车/电动摩托车必须持有摩托车驾驶证方可骑行:
                        3.严禁将本电动轻便摩托车/电动摩托车借给不会操纵或没有摩托车驾驶证的人员驾驶，避免发生事故;4.请按照法律法规规定搭载人员或物品，严禁超载:
                        5.禁止酒后驾驶，患有高血压、疝气、脑震荡后遗症、癫痫病以及血管病等易突发疾病，请勿驾驶:6.如果驾驶时发生异常，请立刻停止驾驶。并及时联系售后服务，在找出异常原因并修复前，请勿骑行。
                    </div>
                </div>
                <div class="usetip">
                    <div class="title">
                        使用安全事项
                    </div>
                    <div class="txt">
                        警告: 禁止停放在建筑门厅、楼梯、走道、安全出口等区域，堵塞通道危险:
                        禁止在居住建筑内和家庭室内充电和停放，充电时应远离可燃物，充电时间不宜过长;充电过程中，若有异味、温度过高、电池出现鼓包等现象时，请立即停止充电，并送至雅迪授权服务商检修;
                        注意:1.水洗的注意事项:清洗前断开整车电源，禁止使用高压水枪冲洗，以免造成内部电子部件和线路进水造
                        成事故隐患。
                        2.骑行时，保持车距，通过交叉路口时减速慢行，转弯前应发出转弯信号;
                        3.骑行过路口时,请走人行横道，注意礼让行人，避让机动车;
                    </div>
                </div> -->
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            image:'',
            class_id:3,
            tablist: [
                '车辆保养与维修', '零部件质保标准'
            ],
            active: '车辆保养与维修',
            info: {}
        }
    },
    mounted() {
        this.getInfo()
        this.getImage()
    },
    methods: {
        getImage(){
            this.$api.getBanner({
                slide_id: 3,
                limit:1
            }).then(res => {
                if (res.code == 1) {
                    this.image = res.data.image
                }
            })
        },
        scroll(name) {
            this.active = name
            if (name == '零部件质保标准') {
                this.class_id = 4
            } else {
                this.class_id = 3
            }
            this.getInfo()
        },

        getInfo() {
            this.$api.getArtInfo({
                class_id: this.class_id,
            }).then(res => {
                if (res.code == 1) {
                    this.info = res.data
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.main {
    background-color: #F5F5F5;
}

.topImg {
    position: relative;
    font-size: 0;

    img {
        width: 100%;
        height: auto;
    }

    span {
        position: absolute;
        bottom: calc(50% - 50px);
        left: 180px;
        font-family: MiSans;
        font-weight: bold;
        font-size: 81px;
        color: #FFFFFF;
    }
}

.page_content {
    width: 100%;

    .tab {
        display: flex;
        justify-content: center;
        background-color: #fff;
        padding: 0 280px;
        height: 75px;
        width: 100%;
        display: flex;
        align-items: center;
        // position: sticky;
        // top: 72px;
        z-index: 97;

        .tab_name {
            margin:0 60px;
            cursor: pointer;
            font-family: MiSans;
            font-weight: 500;
            font-size: 30px;
            color: #010000;
            line-height: 54px;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            justify-content: center;

            &:hover {
                color: #B30610;
            }

            .line {
                display: none;
                position: absolute;
                bottom: 0;
                width: 222px;
                height: 3px;
                background-color: #B30610;
            }


        }

        .active {
            color: #B30610;

            .line {
                display: block;
            }
        }
    }

    .type1,
    .type2 {
        padding: 0 260px 95px;

        ::v-deep img {
            max-width: 100%;
            height: auto;
        }

        .dataInfo {
            padding: 98px 0;

            .notice {
                background-color: #fff;
                width: 100%;
                padding: 95px 125px 95px 78px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .txt {
                    font-family: MiSans;
                    font-weight: 300;
                    font-size: 22px;
                    color: #010000;
                    line-height: 54px;
                    display: block;
                    width: 741px;
                }

                .code {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    font-weight: 300;
                    font-size: 24px;
                    color: #010000;

                    img {
                        width: 198px;
                        height: 198px;
                    }
                }
            }
        }

        .table1 {
            .title {
                font-family: MiSans;
                font-weight: 400;
                font-size: 50px;
                color: #000;
                text-align: center;
                // line-height: 81px;
            }

            .imgCon {
                font-size: 0;
                width: 100%;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }

        .savetip,
        .usetip {
            margin-top: 95px;

            background-color: #fff;
            padding: 60px 70px 60px 130px;

            .title {
                text-align: center;
                margin-bottom: 40px;
                font-family: MiSans;
                font-weight: 400;
                font-size: 50px;
                color: #B30610;
                line-height: 81px;
            }

            .txt {
                font-family: MiSans;
                font-weight: 400;
                font-size: 25px;
                color: #000000;
                line-height: 51px;
            }
        }
    }

    .type2 {
        .table1 {
            margin-top: 97px;
        }
    }

}
@media screen and (max-width:768px) {
    .page_content {
        .tab{
        height: 40px;
        .tab_name{
        font-size: 16px;
        line-height:normal;
    }
    }
    .type1{
        padding:  0 ;
    }
    }
}
</style>